<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>toRefs</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script src="../lib/vue.global.js"></script>
  <script>
    Vue.createApp({
      setup() {
        const state = reative({
          foo: 1,
          bar: 2,
        });
        state.a = 50;

        //将一个响应式对象转换成为一个普通对象，这个普通对象的每个属性都是指向源对象响应属性的ref
        const obj = toRefs(state);
        console.log(state); // Proxy 响应式对象
        console.log(obj); // 普通对象 { foo: 响应式对象， bar: 响应式对象} 没有b的值

        state.foo = 11;
        console.log(state.foo);
        console.log(obj.foo.value);

        obj.foo.value = 100;
        console.log(state.foo);
        console.log(obj.foo.value);

        return {};
      },
    }).mount("#app");
  </script>
</html>
